<template>
  <div class="page">
    <a-breadcrumb style="margin-bottom:12px">
      <a-breadcrumb-item><router-link to="/">首页</router-link></a-breadcrumb-item>
      <a-breadcrumb-item>分类</a-breadcrumb-item>
      <a-breadcrumb-item>{{ title }}</a-breadcrumb-item>
    </a-breadcrumb>

    <PublicArticlesList :category-id="categoryId" :show-toolbar="false" :show-hot="true" :hot-category-id="categoryId" />
  </div>
  
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import PublicArticlesList from './PublicArticles.vue'

const route = useRoute()
const categoryId = computed(() => Number(route.params.id))
const title = computed(() => `分类 #${categoryId.value}`)
</script>

<style scoped>
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px;
}
</style>



